<template>
  <div class="idle_detail">
    <head-top head-title="详情" goBack="true"></head-top>
    <div class="help_top">
      <div class="help_title border-bottom">
        <img :src="list.head_pic" alt="">
        <div class="help_msg">
          <div class="msg_top">
            <p>{{list.nickname}}</p>
          </div>
          <div class="msg_bottom">
            <p v-if="placeName">{{placeName+'-'+list.areas_name}}</p>
            <p v-if="!placeName">{{list.areas_name}}</p>
            <div class="telphone" v-if="list.phone">
              <a :href="'tel:'+list.phone" class="tel">
                <span class="phone-image"></span>{{strPhone}}</a>
            </div>
            <div class="telphone" v-else></div>
          </div>
        </div>
      </div>
    </div>
    <desc-pic :list="list"></desc-pic>
    <div class="money border-bottom" v-if="list.money">
      <span>￥{{list.money}}</span>
    </div>
    <div v-else></div>
    <div class="message_bottom" v-if="flag">
      <span>发布时间：{{list.create_time * 1000 | dateFmt(('YYYY-MM-DD HH:mm:ss'))}}</span>
      <span>浏览人数：{{list.reading_amount}}</span>
    </div>
    <div class="line"></div>
    <comment :list="list" :lists="lists" @passMethods="getIdleDetail" v-if="flag && pageName!=='repair'"></comment>
   <!--官方回复part-->
    <div class="reply" v-if="list.reply_content && pageName==='repair'">
      <div class="assess_title">
        <span class="left_line">▋</span>
        <span>官方回复区</span>
      </div>
      <div class="reply_content">
        <div class="reply_text">{{list.reply_content}}</div>
        <div class="pic_img  clearfix">
          <!--微信浏览器-->
          <div v-if="weixinShow" v-for="(item,index) in list.reply_img" :key="index" class="img_li">
            <div class="img" v-lazy:background-image="item" @click="preview(index)"></div>
          </div>
          <!--普通浏览器-->
          <div v-if="ordinaryShow" class="img-box" v-for="(url, index) in list.reply_img"
               :style="{'background-image': 'url(' + url + ')'}"
               :key="index+'a'">
            <img preview="1" preview-text="" :src="url" alt="">
          </div>
        </div>
      </div>
    </div>
    <!--我的评价展示part-->
    <div class="my_assess" v-if="reviews.length!==0 && pageName==='repair'">
      <div class="assess_title">
        <span class="left_line">▋</span>
        <span>我的评价</span>
      </div>
      <div class="assess_part">
        <div class="part_main">
          <div class="user_info">
            <img :src="list.head_pic" alt="">
            <div class="info_content">
              <h3>{{list.nickname}}</h3>
              <p>{{reviews.created_at}}</p>
            </div>
          </div>
          <!--星级展示-->
          <ul class="star_show">
            <li>
              <span class="space">服务质量</span>
              <img v-for="n in reviews.service_quality" src="../../assets/starOn@2x.png" alt="">
            </li>
            <li>
              <span>结果满意度</span>
              <img v-for="n in reviews.result_star" src="../../assets/starOn@2x.png" alt="">
            </li>
          </ul>
          <!--意见类型反馈-->
          <div class="opinion_show">
            <div class="small_tips" v-for="(label, lindex) in otherLable" :key="lindex">{{label}}</div>
          </div>
          <div class="desc-pic">
            <div class="desc">
              {{reviews.content}}
            </div>
            <div class="pic_img  clearfix">
              <!--微信浏览器-->
              <div v-if="weixinShow" v-for="(item,index) in reviews.imgs" :key="index" class="img_li">
                <div class="img" v-lazy:background-image="item" @click="preview(index)"></div>
              </div>
              <!--普通浏览器-->
              <div v-if="ordinaryShow" class="img-box" v-for="(url, index) in reviews.imgs"
                   :style="{'background-image': 'url(' + url + ')'}"
                   :key="index+'a'">
                <img preview="1" preview-text="" :src="url" alt="">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss">
  @import "../../common/sass/mixin.scss";

  .idle_detail {
    width: 100%;
    padding-top: 40px;
    background: #fff;
    .help_top {
      width: 100%;
      .help_title {
        width: 100%;
        height: 65px;
        img {
          width: 44px;
          height: 44px;
          border-radius: 50%;
          float: left;
          margin-top: 10px;
          margin-left: 10px;
        }
        .help_msg {
          float: right;
          width: 83%;
          height: 65px;
          .msg_top {
            width: 100%;
            height: 33px;
            p:first-child {
              float: left;
              font-size: 15px;
              line-height: 33px;
            }
          }
          .msg_bottom {
            width: 100%;
            height: 32px;
            p {
              float: left;
              line-height: 32px;
              font-size: 13px;
              color: #808080;
            }
            .telphone {
              float: right;
              margin-right: 10px;
              line-height: 32px;
              .tel {
                color: #555;
                font-size: 12px;
                vertical-align: middle;
                .phone-image {
                  display: inline-block;
                  width: 15px;
                  height: 15px;
                  padding-right: 5px;
                  background-size: 15px 15px;
                  background-repeat: no-repeat;
                  @include bgimg('../home/images/dianhua');
                  vertical-align: middle;
                }
              }
            }
          }
        }
      }
    }
    .idle_title {
      width: 100%;
      height: 65px;
      border-bottom: 1px solid #d7d7d7;
      img {
        width: 44px;
        height: 44px;
        float: left;
        margin-top: 10px;
        margin-left: 10px;
        border-radius: 50%;
      }
      .icon_des {
        float: left;
        margin-left: 10px;
        h3 {
          font-size: 15px;
          font-weight: normal;
          line-height: 37px;
        }
        p {
          color: #808080;
          font-size: 13px;
        }
      }
    }
    .money {
      width: 100%;
      height: 20px;
      // border-bottom: 1px solid #d7d7d7;
      span {
        font-size: 12px;
        color: red;
        line-height: 20px;
        margin-left: 10px;
      }
    }
    .message_bottom {
      width: 100%;
      height: 44px;
      line-height: 44px;
      span:first-child {
        font-size: 13px;
        color: #999;
        float: left;
        margin-left: 10px;
      }
      span:last-child {
        font-size: 13px;
        color: #999;
        float: right;
        margin-right: 10px;
      }
    }
    .line {
      width: 100%;
      height: 10px;
      background: #f2f2f2;
    }
    .goods_detail {
      width: 100%;
      .goods_title {
        width: 100%;
        height: 44px;
        span {
          font-size: 15px;
          line-height: 44px;
          margin-left: 10px;
        }
      }
      .goods_image {
        width: 100%;
        text-align: center;
        padding-bottom: 10px;
        img {
          width: 96%;
          height: 210px;
          border-radius: 5px;
        }
      }
    }
    .reply{
      border-bottom: 10px solid #f2f2f2;
      .assess_title{
        padding: 20px 10px;
        border-bottom: 1px solid #f2f2f2;
        .left_line{
          color: #0C7AD9;
        }
        span{
          font-size: 15px;
          color: #333333;
        }
      }
      .reply_content{
        padding: 10px;
        .reply_text{
          line-height: 16px;
          color: #292929;
          font-size: 13px;
        }
        .pic_img {
          width: 100%;
          margin-top: 7px;
          /*微信浏览器的图片预览的样式*/
          .img_li {
            width: 24%;
            height: 80px;
            margin-top: 1%;
            float: left;
            margin-left: 1%;
            background: #f2f2f2;
            .img {
              width: 100%;
              height: 100%;
              background-size: cover;
            }
          }
          /*普通浏览器的图片预览的样式*/
          .img-box {
            float: left;
            /*width: 30%;*/
            padding: 11%;
            margin: 0.65%;
            position: relative;
            overflow: hidden;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            img {
              position: absolute;
              width: 100%;
              height: 100%;
              top: 0;
              right: 0;
              bottom: 0;
              left: 0;
              opacity: 0;
            }
          }
        }
      }
      .assess_part{
        padding: 10px;
        .part_main{
          .user_info{
            display: inline-flex;
            align-items: center;
            img{
              width: 40px;
              height: 40px;
              border-radius: 50px;
            }
            .info_content{
              margin-left: 10px;
              h2{
                font-size: 14px;
                color: #333333;
              }
              p{
                font-size: 12px;
                color: #999999;
                margin-top: 10px;
              }
            }
          }
          .star_show{
            padding: 10px 0;
            li{
              display: inline-flex;
              align-items: center;
              width: 100%;
              margin-top: 10px;
              span{
                font-size: 14px;
                color: #333333;
                margin-right: 10px;
              }
              .space{
                letter-spacing: 4px;
              }
              img{
                width: 14px;
                height: 14px;
                margin-left: 5px;
              }
            }
          }
          .opinion_show{
            /*padding: 10px 0;*/
            display: inline-flex;
            .small_tips{
              font-size: 12px;
              color: #EB7054;
              background: #FFE9E5;
              border-radius: 20px;
              padding: 5px 10px;
              margin-left: 10px;
            }
            .small_tips:first-child{
              margin-left: 0;
            }
          }
          .desc-pic {
            /*padding: 10px;*/
            margin-top: 10px;
            .desc {
              line-height: 16px;
              color: #333333;
              font-size: 14px;
            }
            .pic_img {
              width: 100%;
              margin-top: 7px;
              /*微信浏览器的图片预览的样式*/
              .img_li {
                width: 24%;
                height: 80px;
                margin-top: 1%;
                float: left;
                margin-left: 1%;
                background: #f2f2f2;
                .img {
                  width: 100%;
                  height: 100%;
                  background-size: cover;
                }
              }
              /*普通浏览器的图片预览的样式*/
              .img-box {
                float: left;
                /*width: 30%;*/
                padding: 11%;
                margin: 0.65%;
                position: relative;
                overflow: hidden;
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
                img {
                  position: absolute;
                  width: 100%;
                  height: 100%;
                  top: 0;
                  right: 0;
                  bottom: 0;
                  left: 0;
                  opacity: 0;
                }
              }
            }
          }
        }
      }
    }
    .my_assess{
      width: 100%;
      .assess_title{
        padding: 20px 10px;
        border-bottom: 1px solid #f2f2f2;
        .left_line{
          color: #0C7AD9;
        }
        span{
          font-size: 15px;
          color: #333333;
        }
      }
      .assess_part{
        padding: 10px;
        .part_main{
          background: #F9F9F9;
          padding: 10px;
          .user_info{
            display: inline-flex;
            align-items: center;
            img{
              width: 40px;
              height: 40px;
              border-radius: 50px;
            }
            .info_content{
              margin-left: 10px;
              h2{
                font-size: 14px;
                color: #333333;
              }
              p{
                font-size: 12px;
                color: #999999;
                margin-top: 10px;
              }
            }
          }
          .star_show{
            padding: 10px 0;
            li{
              display: inline-flex;
              align-items: center;
              width: 100%;
              margin-top: 10px;
              span{
                font-size: 14px;
                color: #333333;
                margin-right: 10px;
              }
              .space{
                letter-spacing: 4px;
              }
              img{
                width: 14px;
                height: 14px;
                margin-left: 5px;
              }
            }
          }
          .opinion_show{
            /*padding: 10px 0;*/
            display: inline-flex;
            .small_tips{
              font-size: 12px;
              color: #EB7054;
              background: #FFE9E5;
              border-radius: 20px;
              padding: 5px 10px;
              margin-left: 10px;
            }
            .small_tips:first-child{
              margin-left: 0;
            }
          }
          .desc-pic {
            /*padding: 10px;*/
            margin-top: 10px;
            .desc {
              line-height: 16px;
              color: #333333;
              font-size: 14px;
            }
            .pic_img {
              width: 100%;
              margin-top: 7px;
              /*微信浏览器的图片预览的样式*/
              .img_li {
                width: 24%;
                height: 80px;
                margin-top: 1%;
                float: left;
                margin-left: 1%;
                background: #f2f2f2;
                .img {
                  width: 100%;
                  height: 100%;
                  background-size: cover;
                }
              }
              /*普通浏览器的图片预览的样式*/
              .img-box {
                float: left;
                /*width: 30%;*/
                padding: 11%;
                margin: 0.65%;
                position: relative;
                overflow: hidden;
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
                img {
                  position: absolute;
                  width: 100%;
                  height: 100%;
                  top: 0;
                  right: 0;
                  bottom: 0;
                  left: 0;
                  opacity: 0;
                }
              }
            }
          }
        }
      }
    }
  }
</style>
<script>
  import headTop from '../header/Header.vue'
  import commonUrl from '../../common/js/commonUrl.js'
  import avatar from '../common/avatar.vue'
  import comment from '../common/comment.vue'
  import descPic from '../common/desPic.vue'
  import data from '../../../static/data.json'
  import {IsWeiXin} from '../../common/js/isWeiXin'
  import wx from 'weixin-js-sdk'

  export default {
    name: 'IdleDetail',
    data () {
      return {
        pageName: '', // 页面判断
        strPhone: '', // 省略电话号码
        lists: [],
        list: {},
        reviews: {},
        otherLable: [], // 我的评价里的其他评价
        flag: false,
        province: '',
        city: '',
        district: '',
        placeName: '',
        ordinaryShow: {
          type: Boolean // 普通浏览器
        },
        weixinShow: {
          type: Boolean // 微信浏览器
        }
      }
    },
    created () {
      // console.log(this.$route.params)
      this.pageName = this.$route.params.name
      this.getIdleDetail()
      if (IsWeiXin()) {
        this.ordinaryShow = false
        this.weixinShow = true
      } else {
        this.ordinaryShow = true
        this.weixinShow = false
      }
    },
    methods: {
      getIdleDetail () {
        const url = `${commonUrl.apihost}index.php/home/personal/getMyDetail/?name=${this.$route.params.name}&id=${this.$route.params.id}`
        this.$http.get(url).then(res => {
          if (res.data.code === 200) {
            this.lists = res.data.data.comment
            this.list = res.data.data.info
            this.reviews = res.data.data.reviews // 我的评价内容
            // 转换评价内容里的其他评价内容为数组
            if (this.reviews.length !== 0) {
              const label = res.data.data.reviews.label
              this.otherLable = label.split(',')
            }
            // console.log(this.otherLable)
            // 电话号码中间五位省略
            const phone = res.data.data.info.phone
            const phoneArr = [...phone]
            phoneArr.map((res, index) => {
              if (index > 2 && index < 8) {
                this.strPhone += '*'
              } else {
                this.strPhone += res
              }
            })
            this.flag = true
            this.province = this.list.province // 省
            this.city = this.list.city // 市
            this.district = this.list.district // 区
            for (var j = 0; j < data.length; j++) {
              if (this.province == data[j].code) {
                var pName = data[j].name // 省
                var cdata = data[j].childs
                cdata.map(res => {
                  if (this.city == res.code) {
                    var cName = res.name // 市
                    var adata = res.childs
                    adata.map(res => {
                      if (this.district == res.code) {
                        var aName = res.name// 区
                        this.placeName = pName + '-' + cName + '-' + aName
                      }
                    })
                  }
                })
              }
            }
          }
        })
      },
      // 图片预览
      preview (index) {
        // if (this.ready) {
        wx.previewImage({
          current: this.reviews.imgs[index], // 当前显示图片的http链接
          urls: this.reviews.imgs // 需要预览的图片http链接列表
        })
        // }
      }
    },
    components: {
      headTop,
      avatar,
      comment,
      descPic
    }
  }
</script>
